<template>
  <el-container class="app-layout">
    <!-- 顶部导航栏 -->
    <el-header class="app-header">
      <div class="logo-area">
        <img src="/Logo.svg" alt="Logo" class="logo-img" />
        <span class="logo-title">肿瘤免疫数据管理平台</span>
      </div>
      <div class="toolbar-area">
        <el-tooltip content="智能助手" placement="bottom">
          <el-button circle :icon="ChatDotRound" />
        </el-tooltip>
        <el-tooltip content="操作手册下载" placement="bottom">
          <el-button circle :icon="Document" />
        </el-tooltip>
        <el-dropdown>
          <el-button circle :icon="User" />
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>账号设置</el-dropdown-item>
              <el-dropdown-item>历史任务</el-dropdown-item>
              <el-dropdown-item>我的收藏</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-tooltip content="退出登录" placement="bottom">
          <el-button circle :icon="SwitchButton" />
        </el-tooltip>
      </div>
    </el-header>

    <el-container>
      <!-- 左侧侧边栏 -->
      <el-aside width="200px" class="app-aside">
        <el-menu
          :default-active="activeMenu"
          class="el-menu-vertical-demo"
          router
        >
          <el-menu-item index="/">
            <el-icon><House /></el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-menu-item index="/file-manager">
            <el-icon><Folder /></el-icon>
            <span>文件管理</span>
          </el-menu-item>
          <el-menu-item index="/result-center">
            <el-icon><DataAnalysis /></el-icon>
            <span>结果中心</span>
          </el-menu-item>
           <el-menu-item index="/workflow-designer">
            <el-icon><Share /></el-icon>
            <span>工作流设计</span>
          </el-menu-item>
          <el-menu-item index="/llm-assistant">
            <el-icon><MagicStick /></el-icon>
            <span>大模型助手</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-container>
        <!-- 主内容区 -->
        <el-main class="app-main">
          <router-view />
        </el-main>

        <!-- 底部状态栏 -->
        <el-footer class="app-footer">
          <div class="user-info">
            <span>用户名：李研究员</span>
            <el-divider direction="vertical" />
            <span>角色：普通用户</span>
          </div>
          <div class="system-info">
            <span>已用空间：2.3GB / 10GB</span>
            <el-divider direction="vertical" />
            <span>{{ currentTime }}</span>
          </div>
        </el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { useRoute } from 'vue-router';
import {
  House,
  Folder,
  DataAnalysis,
  ChatDotRound,
  Document,
  User,
  SwitchButton,
  Share,
  MagicStick
} from '@element-plus/icons-vue';

const route = useRoute();
const activeMenu = computed(() => route.path);

const currentTime = ref(new Date().toLocaleString());
let timer;

onMounted(() => {
  timer = setInterval(() => {
    currentTime.value = new Date().toLocaleString();
  }, 1000);
});

onUnmounted(() => {
  clearInterval(timer);
});
</script>

<style scoped>
.app-layout {
  height: 100vh;
}
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  border-bottom: 1px solid #dcdfe6;
}
.logo-area {
  display: flex;
  align-items: center;
}
.logo-img {
  width: 32px;
  height: 32px;
  margin-right: 12px;
}
.logo-title {
  font-size: 20px;
  font-weight: bold;
}
.toolbar-area {
  display: flex;
  align-items: center;
  gap: 10px;
}
.app-aside {
  border-right: 1px solid #dcdfe6;
}
.el-menu {
  border-right: none;
}
.app-main {
  background-color: #f0f2f5;
  padding: 20px;
}
.app-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  font-size: 12px;
  color: #909399;
  border-top: 1px solid #dcdfe6;
  background-color: #fff;
}
</style>
